Node / ReticulumProjects / MeshChatX.git / files / docs / agents / skills / vue-mega-page-split / SKILL.md

Displaying Rendered • View raw • Download

Extract or split Vue mega-page shells under T383838meshchatx/src/frontend/components/

without changing behaviour.

• Splitting listed mega-pages from T383838docs/agents/module-ownership.md

• Moving presentational panels into T383838internal/ or T383838settings/sections/

• Extracting pure helpers next to a page or under T383838js/<feature>/

Not for greenfield pages. Use T383838page-toast-tests for new routes and nav wiring.

Also read:

• T383838docs/agents/module-ownership.md (Frontend mega-pages)

• T383838docs/agents/conventions/frontend.md

• T383838docs/agents/conventions/tests.md

• T383838docs/agents/skills/test-loop/SKILL.md

1. Mechanical extract only. No renames, no toast or i18n churn, no API path changes in the same change as a move.

2. One concern per change: move or behaviour, never both.

3. Match the Options API style of the parent file. Do not introduce Composition API, provide or inject, Pinia, or a composables tree in an extract.

4. Follow inventory names in T383838docs/agents/module-ownership.md. Do not invent alternate folders.

5. Shell stays orchestration. Data ownership, T383838window.api, map or canvas lifecycle init and teardown, and multi-child toast firing stay on the page shell unless a later behaviour change explicitly moves them.

6. One slice per PR or commit series. Prefer one panel, one settings section, or one pure helper module.

7. Promote to shared root components only when two or more unrelated features need the same UI.

8. Keep SPDX on new project files (T3838380BSD unless the file already differs).

9. Do not edit locale files in a mechanical extract.

Before editing, list:

• Method, computed, and data keys touched by the slice

• Template markers (T383838$t keys, T383838ref= names, handler names, T383838v-if flags)

• T383838/api/v1/... path fragments and T383838window.api usages in the slice

• External imports the slice needs

• Existing tests that mount the parent or assert those strings

Inventing symbols not in the inventory is a fail.

1. Pure JS first (no T383838this, no template). Unit-test like T383838MapInternalHelpers.test.js.

2. Presentational panels next (props in, events out). Match T383838settings/sections/.

3. Stateful feature chunks last. Keep Leaflet, WebGL, and WS lifecycle on the shell until the boundary is obvious.

1. Identify a contiguous template region plus its methods, computed, and data.

2. Create the child with SPDX header, Options API, props and emits only for the boundary.

3. Move markup and methods verbatim. Keep names.

4. Wire parent import, T383838components, and thin wrappers if parent tests still call old method names.

5. Add or adjust focused tests for the child. Keep parent smoke tests green.

6. Run continuity checks and focused vitest.

• Prefer extracting when a contiguous concern is about 150 to 300 lines or a whole settings section.

• Aim shells toward under about 2000 lines across multiple PRs.

• Stop a PR when the review diff exceeds roughly one concern (about 300 to 800 lines moved).

After the move:

1. T383838git diff --stat shows LOC moved, not vanished.

2. Every inventory method name still hits under the feature tree.

3. Every inventory T383838$t key still exists under the feature tree.

4. No route, nav, or registry edits unless the slice explicitly required them.

5. No locale file edits.

6. Parent registers new children. Template uses them. Old inline markup is removed only for the sliced region.

• New public methods or renamed handlers for cleanliness

• New provide or inject, Pinia, or composables without an explicit behaviour ticket

• Child calling T383838window.api when the parent previously owned that call, unless the inventory moved the whole call site and tests cover it

• Deleted emits, props, or refs that tests or the parent still need

• Folders not listed in ownership

• Hardcoded English replacing T383838$t(...)

• Updating ownership fixtures only to make a red test green

Fixtures:

• T383838tests/frontend/fixtures/frontend_mega_page_ownership.json

• T383838tests/frontend/fixtures/frontend_symbol_continuity/<page>.json

Tests:

• T383838tests/frontend/frontendOwnershipContract.test.js

• helpers under T383838tests/frontend/helpers/

Refresh ownership fixture only when inventory intentionally changes:

T282828

Te6edf3UPDATE_FRONTEND_OWNERSHIPTff7b72=T79c0ff1 pnpm Tffa657exec vitest run tests/frontend/frontendOwnershipContract.test.js -t ownership_fixture

Per slice:

T282828

pnpm Tffa657exec eslint <touched files> --fix

pnpm Tffa657exec vitest run tests/frontend/<Parent>*.test.js Tffea00\

tests/frontend/<SliceOrHelper>*.test.js Tffea00\

tests/frontend/frontendOwnershipContract.test.js Tffea00\

tests/frontend/behaviorContracts.test.js

Per milestone (meaningful shell shrink or before merge):

T282828

Do not treat T383838task test:quick alone as sufficient for map, settings, call, or conversation extracts.

T383838task test:quick:fe includes T383838frontendOwnershipContract.test.js as a gate, not full page coverage.

1. Read this skill and the ownership row for the page.

2. Build the pre-extract inventory.

3. Mechanical move only into an allowed directory.

4. Continuity T383838rg plus ownership contract tests.

5. Focused vitest for parent, new files, and T383838behaviorContracts.

6. Eslint on touched files.

7. Milestone: T383838task test:frontend.